
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// console.log(11, process.env.NODE_ENV) // 使用 cross-env 才有值
module.exports = (env, argv) => {
    // console.log(env)  // 设置 --env NODE_ENV= 才有值
    // console.log(argv)
    return {
        // entry: './src/index.js',
        entry: {
            main: './src/index.js'
        },
        output: {
            path: path.resolve('dist'),
            filename: 'bundle.js'
        },
        mode: 'development',
        // mode: env.development ? 'development' : 'production',// 设置env时使用
        // mode: process.env.NODE_ENV,
        resolve: {
            alias: {
                '@': path.resolve('src')
            }
        },
        module: {
            rules: [
                {
                    test: /\.js/,
                    loader: 'eslint-loader',
                    enforce: 'pre',//  前置loader   post后置loader
                    options: { fix: true },
                    exclude: /node_modules/
                },
                {
                    test: /\.js$/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                presets: ['@babel/preset-env', '@babel/preset-react'],// 将es6 react编译为es5
                                plugins: [
                                    ["@babel/plugin-proposal-decorators", { legacy: true }], // 启用装饰器
                                    ["@babel/plugin-proposal-class-properties", { loose: true }]
                                ]
                            }
                        }
                    ]
                },
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader', //对象形式 可配置loader参数
                            options: {
                                url: true, //  是否编译css中url
                                import: true,
                                modules: false,  // css是否需要模块化
                                esModule: true, // 是否启用exModule 默认为true
                                // importLoaders: 0,
                                importLoaders: false  // 设置 css前置loader的执行数量  为0时不执行其他所有前置的loader
                            }
                        },
                        'postcss-loader'
                    ]
                },
                {
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader']
                },
                {
                    test: /\.scss$/,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                },
                {
                    test: /\.png$/,
                    type: 'asset/resource' //用于替代webpack4中的file-loader
                },
                {
                    test: /\.ico$/,
                    type: 'asset/inline' // url-loader 吧文件内容变为base64
                }, {
                    test: /\.txt$/,
                    type: 'asset/source' // raw-loader 读取文件原始内容
                },
                {
                    test: /\.jpg$/,
                    type: 'asset', // asset 自动根据文件大小选择处理
                    parser: { //  如果文件大于maxSize 产出一个新文件， 并返回新url 小于则返回base64
                        dataUrlCondition: {
                            maxSize: 4 * 1024
                        }
                    }
                },
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html',
                filename: 'index.html'
            }),
            // new webpack.DefinePlugin({
            //     'XXX.YYY.ZZZ': process.env.NODE_ENV
            //     'process.env.NODE_ENV': process.env.NODE_ENV // 设置mode之后 会提示重复
            // })
        ],
        devServer: {
            static: path.resolve('public'),
            port: 3000,
            open: true,
            // onBeforeSetupMiddleware({ app }) { // 使用express app为express()执行的返回结果 用于模拟接口
            //     app.get('/api/getUser', (req, res) => {
            //         res.json([
            //             {
            //                 name: 'a',
            //                 age: 1,
            //             },
            //         ]);
            //     });
            // }
            // proxy: {
            //     // '/api': 'http://localhost:3001'
            //     // '/api': {  // 当服务器无前缀api时  用pathPrewrite 将api重写为空字符串
            //     //     target: 'http://localhost:3001',
            //     //     pathRewrite: { "^/api": "" }
            //     // }
            // }
        }
    }
}